<!DOCTYPE html>
<html lang="ru">
    <head>
    <meta charset="utf-8">
    <title>HTML Academy: Барбершоп</title>
    <link rel="stylesheet" href="css/normolize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header class="main-header">
        <div class="center-container clearfix">
            <nav class="main-navigation">
                <div class="logo-container">
                    <img src="img/barbershop_logo.png" width="111" height="24" alt="Барбершоп">
                </div>
                <div class="main-navigation-menu">
                    <ul class="main-navigation-menu-links">
                        <li><a class="header-btn" href="#"><span>Информация</span></a></li>
                        <li><a class="header-btn" href="#"><span>Новости</span></a></li>
                        <li><a class="header-btn" href="#"><span>Прайс-лист</span></a></li>
                        <li><a class="header-btn" href="#"><span class="header-btn-active">Магазин</span></a></li>
                        <li><a class="header-btn" href="#"><span>Контакты</span></a></li>
                    </ul>
                </div>
            </nav>
            <div class="login">
                <a class="header-btn-login" href="#">Вход</a>
            </div>
        </div>
    </header>
    <main class="main-content">
        <div class="center-container clearfix">
            <h1 class="main-title">Средства для ухода</h1>
            <nav class="breadcrumbs">
                <ul class="breadcrumbs-links">
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Магазин</a></li>
                    <li><a href="#">Средства для ухода</a></li>
                </ul>
            </nav>
            <div class="filter">
                <form action="#" method="get">
                    <section class="filter-section">
                        <h2 class="filter-section-header">Производители:</h2>
                        <ul class="brand-list">
                            <li>
                                <input class="chk" type="checkbox" name="Baxter_of_California" id="Baxter_of_California" checked>
                                <label class="chk-caption" for="Baxter_of_California">Baxter of California</label>
                            </li>
                            <li>
                                <input class="chk" type="checkbox" name="MR_Natty" id="MR_Natty">
                                <label class="chk-caption" for="MR_Natty">MR Natty</label>
                            </li>
                            <li>
                                <input class="chk" type="checkbox" name="Suavecito" id="Suavecito" checked>
                                <label class="chk-caption" for="Suavecito">Suavecito</label>
                            </li>
                            <li>
                                <input class="chk" type="checkbox" name="Malin_Goetz" id="Malin_Goetz">
                                <label class="chk-caption" for="Malin_Goetz">Malin+Goetz</label>
                            </li>
                            <li>
                                <input class="chk" type="checkbox" name="Murray_s" id="Murray_s">
                                <label class="chk-caption" for="Murray_s">Murray's</label>
                            </li>
                            <li>
                                <input class="chk" type="checkbox" name="American_crew" id="American_crew" checked>
                                <label class="chk-caption" for="American_crew">American crew</label>
                            </li>
                        </ul>
                    </section>
                    <section class="filter-section">
                        <h2 class="filter-section-header">Группы товаров:</h2>
                        <ul class="item-group-list">
                            <li>
                                <label class="filter-item">
                                    <input class="rdb" type="radio" name="good-list-radio" value="shaving">
                                    Бритвенные принадлежности
                                </label>
                            </li>
                            <li>
                                <label class="filter-item">
                                    <input class="rdb" type="radio" name="good-list-radio" value="care" checked>
                                    Средства для ухода
                                </label>
                            </li>
                            <li>
                                <label class="filter-item">
                                    <input class="rdb" type="radio" name="good-list-radio" value="accessories">
                                    Аксессуары
                                </label>
                            </li>
                        </ul>
                    </section>
                    <input type="submit" class="btn" value="Показать">
                </form>
            </div>
            <div class="catalog">
                <article class="catalog-item">
                    <img class="catalog-item-photo" src="img/item_1_main_small.png" width="220" height="165" alt="Набор для путешествий «Baxter of California»">
                    <p class="catalog-item-photo-caption">
                        Набор для путешествий<br> «Baxter of California»
                    </p>
                    <span class="item-price">2900 руб.</span>
                    <a class="btn" href="#">Купить</a>
                </article>
                <article class="catalog-item">
                    <img class="catalog-item-photo" src="img/item_2_main.png" width="220" height="165" alt="Увлажняющий кондиционер «Baxter of California»">
                    <p class="catalog-item-photo-caption">
                        Увлажняющий кондиционер<br> «Baxter of California»
                    </p>
                    <span class="item-price">750 руб.</span>
                    <a class="btn" href="#">Купить</a>
                </article>
                <article class="catalog-item">
                    <img class="catalog-item-photo" src="img/item_3_main.png" width="220" height="165" alt="Гель для волос «Suavecito»">
                    <p class="catalog-item-photo-caption">
                        Гель для волос<br> «Suavecito»
                    </p>
                    <span class="item-price">290 руб.</span>
                    <a class="btn" href="#">Купить</a>
                </article>
                <article class="catalog-item">
                    <img class="catalog-item-photo" src="img/item_4_main.png" width="220" height="165" alt="Глина для укладки волос «American crew»">
                    <p class="catalog-item-photo-caption">
                        Глина для укладки волос<br> «American crew»
                    </p>
                    <span class="item-price">500 руб.</span>
                    <a class="btn" href="#">Купить</a>
                </article>
                <article class="catalog-item">
                    <img class="catalog-item-photo" src="img/item_5_main.png" width="220" height="165" alt="Гель для волос «Baxter of California»">
                    <p class="catalog-item-photo-caption">
                        Гель для волос<br> «Baxter of California»
                    </p>
                    <span class="item-price">300 руб.</span>
                    <a class="btn" href="#">Купить</a>
                </article>
                <article class="catalog-item">
                    <img class="catalog-item-photo" src="img/item_6_main.png" width="220" height="165" alt="Набор для бритья «Baxter of California»">
                    <p class="catalog-item-photo-caption">
                        Набор для бритья<br> «Baxter of California»
                    </p>
                    <span class="item-price">3900 руб.</span>
                    <a class="btn" href="#">Купить</a>
                </article>
                <div class="paginator">
                    <ul>
                        <li><a class="btn paginator-link" href="#">1</a></li>
                        <li><a class="btn paginator-link" href="#">2</a></li>
                        <li><a class="btn paginator-link" href="#">3</a></li>
                        <li><a class="btn paginator-link" href="#">4</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
    <footer class="main-footer">
        <div class="center-container clearfix">
            <div class="footer-contacts">
                Барбершоп «Бородинский»<br> Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
                <a href="#">Как нас найти?</a><br> Телефон: +7 (812) 666-02-66
            </div>
            <div class="footer-social">
                <p>Давайте дружить!</p>
                <a class="social-btn social-btn-vk" href="#">Вконтакте</a>
                <a class="social-btn social-btn-fb" href="#">Фейсбук</a>
                <a class="social-btn social-btn-inst" href="#">Инстаграм</a>
            </div>
            <div class="footer-copyright">
                <p>Разработано:</p>
                <a class="btn" href="https://htmlacademy.ru">HTML Academy</a>
            </div>
        </div>
    </footer>
</body>
</html>
